<template>
	<view class="tui-charts__radar-box" :style="{ width: radar_w + 'px' }">
		<view class="tui-radar__legend" v-if="legend.show">
			<view class="tui-radar__legend-item" v-for="(item, index) in dataset" :key="index">
				<view class="tui-legend__circle" :style="{ background: item.color }"></view>
				<text
					:style="{ fontSize: (legend.size || 24) + 'rpx', lineHeight: (legend.size || 24) + 'rpx', color: legend.color || '#333' }">{{
							item.name
					}}</text>
			</view>
		</view>
		<view class="tui-charts-radar" :class="{ 'tui-radar__mrgin': label.show }"
			:style="{ width: radar_w + 'px', height: radar_w + 'px' }">
			<view class="tui-radar__radius" v-for="(item, index) in indicators" :key="index"
				:style="{ height: radar_w / 2 + 'px', transform: `rotate(${item.angle}deg)`, background: axisLineColor }">
				<view class="tui-radar__name" v-if="label.show"
					:style="{ color: label.color || '#bbb', fontSize: (label.size || 24) + 'rpx' }">{{ item.name }}
				</view>
			</view>
			<view class="tui-radar__center">
				<view class="tui-radar__hypotenuse" v-for="(l, idx) in hypotenuse" :key="l.id"
					:style="{ bottom: l.y + 'px', left: l.x + 'px', width: l.width + 'px', transform: `rotate(${l.angle}deg)`, background: splitLineColor }">
				</view>
				<view v-for="(item, index) in dataset" :key="index" @tap.stop="onDotTap(index)">
					<view class="tui-radar__dataset" v-for="(d, i) in item.lines" :key="d.id"
						:style="{ bottom: d.y + 'px', left: d.x + 'px', width: d.width + 'px', transform: `rotate(${d.angle}deg)`, background: item.color }">
						<view class="tui-radar__dot" :style="{ background: item.color }"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="tui-radar__tooltip" v-if="tooltip" :class="{ 'tui-radar__tooltip-show': tooltipShow }">
			<view class="tui-tooltip__title">{{ name }}</view>
			<view class="tui-radar__tooltip-item" v-for="(item, index) in tooltips" :key="index">
				<view class="tui-legend__circle" :style="{ background: color }"></view>
				<text class="tui-tooltip__val">{{ item.name }}</text>
				<text class="tui-tooltip__val tui-tooltip__val-ml">{{ item.value }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: "tui-charts-radar",
	emits: ['click'],
	props: {
		//图例，说明
		legend: {
			type: Object,
			default() {
				return {
					show: true,
					size: 24,
					color: '#333'
				}
			}
		},
		tooltip: {
			type: Boolean,
			default: true
		},
		width: {
			type: [Number, String],
			default: 480
		},
		splitNumber: {
			type: [Number, String],
			default: 5
		},
		indicator: {
			type: Array,
			default() {
				return []
			}
		},
		label: {
			type: Object,
			default() {
				return {
					show: true,
					color: '#bbb',
					size: 24
				}
			}
		},
		axisLineColor: {
			type: String,
			default: '#ddd'
		},
		splitLineColor: {
			type: String,
			default: '#eee'
		}
	},
	// #ifndef VUE3
	beforeDestroy() {
		this.clearTimer()
	},
	// #endif
	// #ifdef VUE3
	beforeUnmount() {
		this.clearTimer()
	},
	// #endif
	data() {
		return {
			radar_w: 200,
			dataset: [],
			indicators: [],
			hypotenuse: [],
			name: '',
			color: '',
			tooltips: [],
			tooltipShow: false,
			timer: null
		};
	},
	created() {
		this.radar_w = this.getPx(this.width)
		this.draw(this.dataset)
	},
	methods: {
		getPx(rpx) {
			let px = parseInt(uni.upx2px(Number(rpx)))
			return px % 2 === 0 ? px : px + 1
		},
		getDrawData(dots, idx, type = 'l') {
			let data = [];
			dots.map((dot, index) => {
				let obj = !dots[index + 1] ? dots[0] : dots[index + 1]
				const AB = {
					x: obj.x - dot.x,
					y: obj.y - dot.y,
					y1: dot.y - obj.y
				}
				const v = Math.sqrt(Math.pow(AB.x, 2) + Math.pow(AB.y, 2));
				const angle = Math.atan2(AB.y1, AB.x) * (180 / Math.PI);
				data.push({
					id: type + idx + '_' + index,
					x: dot.x + 1,
					y: dot.y,
					width: v,
					angle: AB.y1 > 0 ? Math.sqrt(Math.pow(angle, 2)) : -Math.sqrt(Math.pow(angle, 2))
				})
			})
			return data
		},
		initData(dataset, r, indicator, angle) {
			let total = this.radar_w
			dataset = JSON.parse(JSON.stringify(dataset))
			dataset.map((item, index) => {
				let lines = []
				item.source.map((val, idx) => {
					let dsR = val / indicator[idx].max * r
					lines.push({
						y: dsR * Math.cos(angle * idx * Math.PI / 180),
						x: dsR * Math.sin(angle * idx * Math.PI / 180)
					})
				})
				item.lines = this.getDrawData(lines, index, 'd')
			})
			this.dataset = dataset
		},
		draw(dataset) {
			if (!dataset || !dataset[0] || !this.indicator) return
			let len = this.indicator.length
			let angle = 360 / len
			let r = this.radar_w / 2
			let indicator = JSON.parse(JSON.stringify(this.indicator))
			indicator.map((item, i) => {
				item.angle = angle * i
			})
			this.indicators = indicator

			let dots = []
			let sn = Number(this.splitNumber)
			for (let i = 0; i < sn; i++) {
				let dotArr = []
				let dsDot = []
				let radius = r - i * (r / sn)
				for (let j = 0; j < len; j++) {
					dotArr.push({
						y: radius * Math.cos(angle * j * Math.PI / 180),
						x: radius * Math.sin(angle * j * Math.PI / 180)
					})
				}
				dots.push(dotArr)
			}

			let lineArr = [];
			dots.map((dotArr, idx) => {
				lineArr = lineArr.concat(this.getDrawData(dotArr, idx))
			})

			this.hypotenuse = lineArr

			this.initData(dataset, r, indicator, angle)
		},
		clearTimer() {
			clearTimeout(this.timer)
			this.timer = null;
		},
		tooltipHandle(index) {
			let data = this.dataset[index]
			let tooltips = []
			let indicator = JSON.parse(JSON.stringify(this.indicator))
			indicator.map((item, idx) => {
				item.value = data.source[idx]
			})
			this.name = data.name || ''
			this.color = data.color || '#333'
			this.tooltips = indicator;
			this.clearTimer()
			this.tooltipShow = true;
			this.timer = setTimeout(() => {
				this.tooltipShow = false
			}, 5000)
		},
		onDotTap(index) {
			this.tooltipHandle(index);
			this.$emit('click', {
				datasetIndex: index
			})
		}
	}

}

</script>

<style scoped>
.tui-charts__radar-box {
	position: relative;
}

.tui-charts-radar {
	border-radius: 50%;
	position: relative;
	transform: rotate(0deg);
}

.tui-radar__mrgin {
	margin-top: 32rpx;
	margin-bottom: 32rpx;
}

.tui-radar__radius {
	width: 1px;
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	transform-origin: 50% 100%;
}

.tui-radar__name {
	min-width: 120rpx;
	font-size: 24rpx;
	position: absolute;
	top: -20rpx;
	left: 50%;
	transform: translate(-50%, -100%);
	text-align: center;
}

.tui-radar__center {
	position: absolute;
	width: 1px;
	height: 1px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.tui-radar__hypotenuse,
.tui-radar__dataset {
	height: 1px;
	position: absolute;
	transform-origin: 0 50%;
	z-index: 2;
}

.tui-radar__dataset {
	z-index: 3;
	/* #ifdef H5 */
	cursor: pointer;
	/* #endif */
}

.tui-radar__dot {
	height: 5px;
	width: 5px;
	border-radius: 50%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 5;
	transform: translate(-50%, -50%) rotate(0);
	/* #ifdef H5 */
	cursor: pointer;
	/* #endif */
}

.tui-radar__legend {
	width: 100%;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding-bottom: 24rpx;
}

.tui-radar__legend-item {
	display: flex;
	align-items: center;
	margin-left: 24rpx;
	margin-bottom: 30rpx;
}

.tui-legend__circle {
	height: 20rpx;
	width: 20rpx;
	border-radius: 50%;
	margin-right: 8rpx;
	flex-shrink: 0;
}

.tui-radar__tooltip {
	padding: 30rpx;
	border-radius: 12rpx;
	background-color: rgba(0, 0, 0, .6);
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 20;
	visibility: hidden;
	opacity: 0;
	transition: all 0.3s;
}

.tui-tooltip__title {
	font-size: 30rpx;
	color: #fff;
	line-height: 30rpx;
}

.tui-radar__tooltip-show {
	visibility: visible;
	opacity: 1;
}


.tui-radar__tooltip-item {
	display: flex;
	align-items: center;
	padding-top: 24rpx;
	white-space: nowrap;
}

.tui-tooltip__val {
	font-size: 24rpx;
	line-height: 24rpx;
	color: #fff;
	margin-left: 6rpx;
}

.tui-tooltip__val-ml {
	margin-left: 20rpx;
}
</style>
